<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Rendering Tests</title>
    <link rel="stylesheet" href="../css/map.css">
</head>
<body>
    <!-- include source files here... -->
    <script src='../js/lib/lodash.js'></script>
    <script src='../js/lib/d3.v3.js'></script>

    <script src='../js/id/id.js'></script>
    <script src='../js/id/util.js'></script>

    <script src="../js/id/geo.js"></script>
    <script src="../js/id/geo/extent.js"></script>

    <script src="../js/id/svg.js"></script>
    <script src="../js/id/svg/areas.js"></script>
    <script src="../js/id/svg/icon.js"></script>
    <script src="../js/id/svg/lines.js"></script>
    <script src="../js/id/svg/midpoints.js"></script>
    <script src="../js/id/svg/osm.js"></script>
    <script src="../js/id/svg/points.js"></script>
    <script src="../js/id/svg/layers.js"></script>
    <script src="../js/id/svg/tag_classes.js"></script>
    <script src="../js/id/svg/vertices.js"></script>

    <script src='../js/id/core/entity.js'></script>
    <script src='../js/id/core/graph.js'></script>
    <script src='../js/id/core/history.js'></script>
    <script src='../js/id/core/node.js'></script>
    <script src='../js/id/core/relation.js'></script>
    <script src='../js/id/core/way.js'></script>

    <script src='../js/id/presets.js'></script>
    <script src='../js/id/presets/collection.js'></script>
    <script src='../js/id/presets/preset.js'></script>

    <form style="position: fixed; right: 10px; bottom: 10px">
        <input id="background-color" type="range" min="0" max="255" value="255">
        <label for="background-color">Background Color</label>
    </form>

    <script>
        var bg = d3.select("#background-color")
            .on("change", function () {
                var v = bg.property("value");
                d3.select("body")
                    .style("background-color", d3.rgb(v,v,v));
            });

        var infiniteExtent = iD.geo.Extent([0, 0], [Infinity, Infinity]),
            projection = function(p) { return p; },
            filter = d3.functor(true),
            context = {};

        projection.stream = function(listener) {
            return listener;
        };

        context.presets = function() {
            return iD.presets().load({
                presets: {
                    "amenity/restaurant": {
                        geometry: ['point'],
                        tags: {
                            amenity: 'restaurant'
                        },
                        icon: 'restaurant'
                    },
                    "highway/turning_circle": {
                        geometry: ['vertex'],
                        tags: {
                            highway: 'turning_circle'
                        },
                        icon: 'circle'
                    },
                    "railway/level_crossing": {
                        geometry: ['vertex'],
                        tags: {
                            railway: 'level_crossing'
                        },
                        icon: 'cross'
                    },
                    "other": {
                        geometry: ['point', 'vertex', 'line', 'area', 'relation'],
                        tags: {}
                    }
                }
            });
        };

        iD.data = {
            featureIcons: {
                "restaurant": {"12":[0,3840],"18":[0,3854],"24":[0,3874]},
                "cross":{"12":[0,1320],"18":[0,1334],"24":[0,1354]},
                "circle":{"12":[0,1020],"18":[0,1034],"24":[0,1054]}
            }
        };

        context.imagePath = function(_) {
            return 'img/' + _;
        };

        context.selectedIDs = function() {
            return [];
        };

        function tagHTML(d) {
            return _.map(d, function (value, key) { return key + "=" + value;}).join("<br>");
        }
    </script>

    <table>
        <thead>
            <tr><th></th><th>Base</th><th>Hover</th><th>Selected</th></tr>
        </thead>
        <tbody class="points">
        </tbody>
    </table>

    <script>
        var data = [{}, {amenity: 'restaurant'}],
            modes = ['base', 'hover', 'selected'],
            node = iD.Node({loc: [15, 30]}),
            points = iD.svg.Points(projection, context);

        var row = d3.select('.points').selectAll('tr')
            .data(data)
          .enter().append('tr');

        row.append('th')
            .html(tagHTML);

        row.selectAll('td')
            .data(function (d) {
                return modes.map(function (m) {
                    return _.extend({ mode: m }, d);
                });
            })
          .enter()
            .append('td')
            .attr('class', function (d) { return d.mode === 'selected' ? 'mode-select' : 'mode-browse'; })
            .append('svg')
            .attr('width', 30)
            .attr('height', 40)
            .attr('data-zoom', function (d) { return d.zoom; })
            .call(iD.svg.Layers(context))
            .each(function (d) {
                var n = node.update({tags: d}),
                    graph = iD.Graph([n]);

                d3.select(this)
                    .attr('class', 'behavior-hover')
                    .call(points, graph, [n], filter)
                    .selectAll('.point')
                    .classed(d.mode, d.mode !== 'base');
            });
    </script>

    <table>
        <thead>
            <tr><th></th><th colspan="3">z16</th><th colspan="3">z17</th><th colspan="3">z18</th></tr>
            <tr><th></th><th>Base</th><th>Hover</th><th>Selected</th><th>Base</th><th>Hover</th><th>Selected</th><th>Base</th><th>Hover</th><th>Selected</th></tr>
        </thead>
        <tbody class="vertices">
        </tbody>
    </table>

    <script>
        var data = [{
                type: 'normal',
                tags: {}
            }, {
                type: 'shared',
                shared: true,
                tags: {}
            }, {
                type: 'highway=turning_circle',
                tags: {highway: 'turning_circle'}
            }, {
                type: 'railway=level_crossing',
                tags: {railway: 'level_crossing'}
            }, {
                type: 'unknown tag',
                tags: {interesting: 'yes'}
            }],
            zooms = [16, 17, 18],
            modes = ['base', 'hover', 'selected'],
            node = iD.Node({loc: [15, 15]}),
            way = iD.Way({nodes: [node.id]}),
            vertices = iD.svg.Vertices(projection, context);

        var row = d3.select('.vertices').selectAll('tr')
            .data(data)
          .enter().append('tr');

        row.append('th')
            .text(function (d) { return d.type; });

        row.selectAll('td')
            .data(function (d) {
                return _.flatten(zooms.map(function (z) {
                    return modes.map(function (m) {
                        return _.extend({ zoom: z, mode: m }, d);
                    });
                }));
            })
          .enter()
            .append('td')
            .attr('class', function (d) { return d.mode === 'selected' ? 'mode-select' : 'mode-browse'; })
            .append('svg')
            .attr('width', 30)
            .attr('height', 30)
            .attr('data-zoom', function (d) { return d.zoom; })
            .call(iD.svg.Layers(context))
            .each(function (d) {
                var n = node.update({tags: d.tags}),
                    graph = iD.Graph([n, way]);

                d3.select(this)
                    .attr('class', 'behavior-hover')
                    .call(vertices, graph, [n, way], filter, d.zoom)
                    .selectAll('.vertex')
                    .classed(d.mode, d.mode !== 'base')
                    .classed('shared', d.shared);
            });
    </script>

    <table>
        <thead>
            <tr><th></th><th colspan="3">z16</th><th colspan="3">z17</th></tr>
            <tr><th></th><th>Base</th><th>Hover</th><th>Selected</th><th>Base</th><th>Hover</th><th>Selected</th></tr>
        </thead>
        <tbody class="highways">
        </tbody>
    </table>

    <script>
        var zooms = [16, 17],
            modes = ['base', 'hover', 'selected'],
            tags = [
                {},
                {highway: 'motorway'},
                {highway: 'trunk'},
                {highway: 'primary'},
                {highway: 'secondary'},
                {highway: 'tertiary'},
                {highway: 'residential'},
                {highway: 'service'},
                {highway: 'track'},
                {highway: 'road'},
                {highway: 'unclassified'},
                {highway: 'living_street'},
                {highway: 'pedestrian'},
                {highway: 'path'},
                {highway: 'footway'},
                {highway: 'cycleway'},
                {highway: 'bridleway'},
                {highway: 'steps'},
                {highway: 'proposed'},
                {highway: 'construction', construction: 'motorway'},
                {highway: 'construction', construction: 'trunk'},
                {railway: 'rail'},
                {railway: 'abandoned'},
                {railway: 'subway'},
                {waterway: 'stream'},
                {waterway: 'river'},
                {waterway: 'ditch'},
                {power: 'line'},
                {boundary: 'administrative'},
                {boundary: 'protected_area'},
                {boundary: 'national_park'}];

        var row = d3.select('.highways').selectAll('tr')
            .data(tags)
          .enter().append('tr');

        row.append('th')
            .html(tagHTML);

        var a = iD.Node({loc: [15, 15]}),
            b = iD.Node({loc: [185, 15]}),
            way = iD.Way({nodes: [a.id, b.id]}),
            vertices = iD.svg.Vertices(projection, context),
            lines = iD.svg.Lines(projection, context),
            midpoints = iD.svg.Midpoints(projection, context);

        row.selectAll('td')
            .data(function (d) {
                return _.flatten(zooms.map(function (z) {
                    return modes.map(function (m) {
                        return { zoom: z, mode: m, tags: d };
                    });
                }));
            })
          .enter()
            .append('td')
            .attr('class', function (d) { return d.mode === 'selected' ? 'mode-select' : 'mode-browse'; })
            .append('svg')
            .attr('width', 200)
            .attr('height', 30)
            .attr('data-zoom', function (d) { return d.zoom; })
            .call(iD.svg.Layers(context))
            .each(function (d) {
                var highway = way.update({tags: d.tags}),
                    graph = iD.Graph([a, b, highway]);

                d3.select(this)
                    .attr('class', 'behavior-hover')
                    .call(vertices, graph, [a, b], filter, d.zoom)
                    .call(lines, graph, [highway], filter)
                    .call(midpoints, graph, [highway], filter, infiniteExtent)
                    .selectAll('.line')
                    .classed(d.mode, d.mode !== 'base');
            });
    </script>

    <table>
        <thead>
            <tr><th></th><th>Base</th><th>Selected</th></tr>
        </thead>
        <tbody class="areas">
        </tbody>
    </table>

    <script>
        var modes = ['base', 'selected'],
            tags = [
                {area: 'yes'},
                {natural: 'yes'},
                {natural: 'water'},
                {natural: 'wood'},
                {building: 'yes'},
                {amenity: 'parking'},
                {amenity: 'school'}
            ];

        var row = d3.select('.areas').selectAll('tr')
            .data(tags)
          .enter().append('tr');

        row.append('th')
            .html(function (d) { return _.map(d, function (value, key) { return key + "=" + value;}).join("<br>"); });

        var a = iD.Node({loc: [15, 15]}),
            b = iD.Node({loc: [85, 15]}),
            c = iD.Node({loc: [85, 85]}),
            d = iD.Node({loc: [15, 85]}),
            way = iD.Way({nodes: [a.id, b.id, c.id, d.id, a.id]}),
            vertices = iD.svg.Vertices(projection, context),
            areas = iD.svg.Areas(projection, context),
            midpoints = iD.svg.Midpoints(projection, context);

        row.selectAll('td')
            .data(function (d) {
                return modes.map(function (m) {
                    return { mode: m, tags: d };
                });
            })
          .enter()
            .append('td')
            .append('svg')
            .attr('width', 100)
            .attr('height', 100)
            .call(iD.svg.Layers(context))
            .each(function (datum) {
                var area = way.update({tags: datum.tags}),
                    graph = iD.Graph([a, b, c, d, area]);

                d3.select(this)
                    .attr('class', datum.mode === 'selected' ? 'mode-select' : 'mode-browse')
                    .call(vertices, graph, [a, b, c, d], filter)
                    .call(areas, graph, [area], filter)
                    .call(midpoints, graph, [area], filter, infiniteExtent)
                    .selectAll('.area')
                    .classed(datum.mode, datum.mode !== 'base');
            });
    </script>

</body>
</html>
